{{Template:SZPT-CHINA/head}}
<html>

<head></head>
<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">

<script>
    $(document).ready(function() {
        //document.body.append(document.getElementById('loadImg'))
        //滑动
        //加载适配
        init();
        var loadImg = document.getElementById('loadImg'); //选取id为test的元素
        loadImg.style.display = 'block'; // 隐藏选择的元素
    });


    //BEGIN-loading
    var loadhidekey = 0;

    window.onload = function() {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function() {
            //$("#loaderDownId").hide();
            //$("#loadingHome").hide();
            //$("#loading").hide();
        }, 10);
        init();


        setTimeout(function() {
            //$("#loaderDownId").hide();
            //滑到顶部
            //document.body.scrollTop = document.documentElement.scrollTop = 0;

            $("#directory").hide();
            $("#loadingHome").hide();

            document.body.append(document.getElementById('directory'))
            document.body.append(document.getElementById('head'))
                // $("#loading").hide();
        }, 10);




        //


    }

    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }



    //设置展开
    $(document).ready(function() {

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            // mobilePage();
            designHeight = 3100;
        } else {
            //pc
            designHeight = 980;
        }
        lateHeight = document.documentElement.clientHeight;
        heightRatio = lateHeight / designHeight
        console.log("height:", heightRatio)
        console.log('1')

        document.getElementById("dir1").onclick = function() {
            // window.scrollTo(0, 350*heightRatio/0.713265306122449);
            let target = document.getElementById('content1');
            animateScroll(target, 250);
            $("#directory").show();
        }
        document.getElementById("dir2").onclick = function() {
            //window.scrollTo(0, 3500 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content2');
            animateScroll(target, 250);
        }
        document.getElementById("dir3").onclick = function() {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content3');
            animateScroll(target, 250);
        }


    });
    $(window).scroll(function() {

        if ($(this).scrollTop() > 270 * heightRatio / 0.713265306122449) {
            $("#directory").show();
        } else {
            $("#directory").hide();
        }

    });
    // 视频加载好
    // function hideLoad() {
    //     console.log("视频加载好了", loadhidekey)

    //     if (loadhidekey == 1) {
    //         setTimeout(function () {
    //             //$("#loaderDownId").hide();
    //             $("#loadingHome").hide();
    //             //$("#loading").hide();
    //         }, 10);
    //     }
    //     else if (loadhidekey == 0) {
    //         loadhidekey = 1;
    //     }
    // }
    //END-loading
</script>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // $("#m1").hover(
        //     function () {
        //         keyPic()
        //         $("#p1").animate({
        //             height: '700px',
        //             width: '650px'
        //         }, 20);
        //         $("#bg1").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 650px;");

        //     },
        //     function () {
        //         $("#p1").attr("style", "height: 650px;float: left;");
        //         $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");

        //     }
        // )
        //设置默认


        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 33.333333%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:640px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 33.3333333%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", p);
        $("#bg1").attr("style", bg);

        $("#p2").attr("style", pNo);
        $("#bg2").attr("style", bgNo);

        $("#p3").attr("style", pNo);
        $("#bg3").attr("style", bgNo);


        $("#m1").mouseover(
                function() {
                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);


                    //1
                    $("#p1").attr("style", p);
                    $("#bg1").attr("style", bg);
                },

            ),
            $("#m2").mouseover(
                function() {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);


                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function() {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);


                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),

            $("#m1").click(function() {
                window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Hardware";
            });
        $("#m2").click(function() {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Implementation";
        });
        $("#m3").click(function() {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Proof_Of_Concept";
        });


    });
</script>
<script>
    $(document).ready(function() {

        $("#dir1").hover(function() {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir1").attr("style", value);
        }, function() {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir1").attr("style", value);
        });

        $("#dir2").hover(function() {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir2").attr("style", value);
        }, function() {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir2").attr("style", value);
        });

        $("#dir3").hover(function() {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir3").attr("style", value);
        }, function() {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir3").attr("style", value);
        });
    });
</script>

<body class="pc" id="main">

    <!-- loading -->
    <div id="loadingHome" style=" position: fixed; left: 0px;top: -100px; width: 100%;height:115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg" style=" position: relative; height: 6%;width: auto;left: 0%;margin:0px auto;top: 300px; text-align: center;display: none;" src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>
    <div>

        <div class="mainImg">
            <div>
                <div id="bg1" style="background-color: #f8c8b2;float: left;width: 33%;">
                    <image id="p1" src="https://2021.igem.org/wiki/images/6/60/T--SZPT-CHINA--Implementation-Gardware2.0.png" class="smallImg"></image>
                </div>
                <div id="bg2" style="background-color: #f8c8b2;float: left;width: 33%;">

                    <image id="p2" src="https://2021.igem.org/wiki/images/8/88/T--SZPT-CHINA--Implementation-Implementation2.0.png" class="smallImg"></image>

                </div>
                <div id="bg3" style="background-color: #f8c8b2;float: left;width: 33%;">
                    <image id="p3" src="https://2021.igem.org/wiki/images/d/d5/T--SZPT-CHINA--Implementation-Proof_of_Concept2.0.png" class="smallImg"></image>
                </div>

            </div>
            <div style="z-index: 99;position: absolute;">
                <image src="https://2021.igem.org/wiki/images/9/98/T--SZPT-CHINA--gardware-font.png" style="margin-top: -50px;margin-left: 397px;"> </image>
            </div>
            <div style="margin-top: 50px;">
                <div id="m1" style="width: 640px;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
                <div id="m2" style="width: 640px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 642px;">
                </div>
                <div id="m3" style="width: 640px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 1280px;">
                </div>

            </div>

        </div>

        <!-- down -->
        <div style="width: 1920px;background-color: #ffffff;">
            <div id="blue" style="float:left; height: 8500px; width: 55px;background-color: #2588d4;">
            </div>
            <div id="directory" style="float:left;margin-top: 8vh;z-index: 990;position: fixed;">
                <div style="margin-top: 9vh;background-color: #dd544d;margin-left: 6vw;border-radius:10px;padding: 1vw;width: 16vw;">
                    <h3 id="dir0p" style="color:#fffea4;padding-left: 10%;font-size:1.8rem;font-family: 'Quicksand', sans-serif;">
                        Hardware</h3>
                    <div style="margin-left: 13%;">
                        <div id="dir1" style="color:#ffffff; transition: all 0.3s;width: auto;height: 6vh;margin-top: 3vh;">
                            <p id="dir1p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Overview
                            </p>
                        </div>

                        <div id="dir2" style="color:#ffffff;height:6vh;width: auto;">
                            <p id="dir2p" style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                Optogenetics
                            </p>
                        </div>


                        <div id="dir3" style="color:#ffffff;width: auto;height: 6vh;">
                            <p id="dir3p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Manufacture</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content" style="float:left;width: 1173px;margin-left: 397px;margin-top: 100px;padding-left:100px;background-color: #ffffff;text-align: justify;">

                <div id="content1" class="yj">● Overview
                </div>

                <div class="pb">
                    We have prepared wireless optical control device that can remotely control the intensity and color of light, providing ideas and hardware for people using optogenetic methods.
                </div>


                <div id="content2" class="yj">● Optogenetics

                </div>

                <div class="pb">
                    Optogenetics, also known as photo-stimulated genetic engineering, is a precise control of biological physiology and behavior through optical and genetic techniques.
                    <br><br> Two optogenetic systems are used in our project. One is a NIR light-responsive system whose function is to regulate c-di-GMP function to control BC film production (Figure 1). <br><br>The other is a blue light responsive system
                    whose function is safety and drug release (Figure 2).
                    <br><br> This year, our team designed <strong>a simple wireless optical control device</strong> to make an effort for optogenetics hardware.

                </div>

                <image src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--hardware-gif-1.gif" class="pic" style="margin-left: 106px;">

                    <div class="tz">Figure 1. C-di-GMP signaling and film production</div>


                    <image src="https://2021.igem.org/wiki/images/0/0a/T--SZPT-CHINA--hardware-gif-2.gif" class="pic" style="margin-left: 106px;">

                        <div class="tz">Figure 2. Safety and drug release (cell lysis)</div>

                        <div id="content3" class="yj">● Manufacture</div>
                        <div class="ej">Material
                        </div>
                        <div class="pb">Chip model: ESP8266, CP9102, circuit board, several blue and red lamps, several resistors, two sliding resistors, several wires, glue gun, welding gun, clip.
                        </div>
                        <div class="ej">Preparation</div>

                        <div class="sj">1. Simple circuit connection diagram</div>

                        <div class="pb">The rated voltage of the blue lamp is 3V. And the rated voltage of red lamp is 2V which needs to be partial by a resistor in series.</div>


                        <image src="https://2021.igem.org/wiki/images/e/ea/T--SZPT-CHINA--hardware-pic-1.png" class="pic" style="margin-left: 231px;"></image>
                        <div class="tz">Figure 3. Circuit Diagram</div>


                        <div class="sj">2.Server</div>

                        <div class="pb">EMQ X message server.</div>


                        <div class="sj">3.Wechat mini program</div>

                        <div class="pb">Using WebSocket to Interact with server. </div>

                        <image src="https://2021.igem.org/wiki/images/1/1b/T--SZPT-CHINA--Hardware-1020-1.png" class="pic" style="margin-left: 172px;">
                        </image>
                        <div class="tz">Figure 4. Functional Execution Flow</div>


                        <div class="ej">Functional Execution Flow</div>

                        <div class="pb">1. The control mini program makes a WebSocket connection to the server and changes the "subject" value on the server.
                            <br><br> 2. The circuit board is connected with the power supply, and according to wifi name and password in the code written in advance to connect wifi.
                            <br><br> 3. The circuit board connects wifi successfully, initiates the connection with the server, continuously obtains the value of the corresponding theme of the server, and changes the on and off state of the light according
                            to the value.
                            <br><br> 4. Use sliding rheostat to change brightness.
                        </div>


                        <div class="ej">The steps</div>

                        <div class="pb">1. Building a server<br> Build an EMQ X messages server on the Linux server and test the function of server using mqttbox.
                            <br><br>
                            <br> 2. Making Wechat mini program<br> The front end system makes two switch components, and then uses JS and server to connect WebSocket to change the theme value.
                            <br><br>
                            <br> 3. Circuit board<br> Implement it according to the circuit diagram.


                        </div>
                        <video src="https://2021.igem.org/wiki/images/2/28/T--SZPT-CHINA--hardware-video-all.mp4" controls style="margin-top: 100px;margin-left: 48px;width: 1000px;"> </video>
            </div>
            <div id="red" style="float: left;margin-left: 140px; height: 8500px;width: 55px;background-color: #d44225;">
            </div>
        </div>

        <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic" style="margin-top: -372px;width: 1920px;"></image>
    </div>
</body>

<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
            //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function() {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;
            mainClass.add('pc');
            mainClass.remove('large');

            var value = document.getElementById('blue').getAttribute("style")
            value = value.replace(/8500/, "9500")
            $("#blue").attr("style", value);

            var value = document.getElementById('red').getAttribute("style")
            value = value.replace(/8500/, "9500")
            $("#red").attr("style", value);


            //手机适配目录
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir1").attr("style", value);
            //margin
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/3vh/, "1vh")
            $("#dir1").attr("style", value);

            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir2").attr("style", value);

            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir3").attr("style", value);

            var value = document.getElementById('dir0p').getAttribute("style")
            value = value.replace(/1.8rem/, "1.3rem")
            $("#dir0p").attr("style", value);

            var value = document.getElementById('dir1p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir1p").attr("style", value);

            var value = document.getElementById('dir2p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir2p").attr("style", value);

            var value = document.getElementById('dir3p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir3p").attr("style", value);


            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 980;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
            // 是移动设备 展示移动设备页
            //document.getElementById('main').style = 'display:none'
            //document.getElementsByClassName('mobile')[0].style = 'display:flex'
            // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function() {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>